import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Input, Button, List } from 'antd'
import 'antd/dist/antd.css'
// import store from './store'

class App extends Component {
  // constructor(props){
  //   super(props)
  //   this.state = store.getState()
  // }

  render() {
    const { inputValue, list, changeInputValue, handleBtnClick, handleDeleteClick } = this.props
    return (
      <div style={{ margin: 10 }}>
        <Input style={{ width: 250, marginRight: 10 }} value={inputValue} onChange={changeInputValue}></Input>
        <Button onClick={handleBtnClick}>提交</Button>
        <List style={{ width: 250, marginTop: 10 }} bordered dataSource={list} renderItem={(item,index) => (<List.Item onClick={() => {handleDeleteClick(index)}}>{item}</List.Item>)}></List>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    inputValue: state.inputValue,
    list: state.list
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    changeInputValue(e) {
      const action = {
        type: 'change_input_value',
        value: e.target.value
      }
      dispatch(action)
    },
    handleBtnClick() {
      const action = {
        type: 'add_item'
      }
      dispatch(action)
    },
    handleDeleteClick(index) {
      const action = {
        type: 'del_item',
        index
      }
      dispatch(action)
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)
// export default App

